import React from 'react';
import classNames from 'classnames';
import Pane from './_components/Pane';
import styles from './index.less';

const Index = (props) => {
  const { items = [], ...rest } = props;

  return (
    <span className={styles.wrapper} {...rest}>
      {items.map((item, index) => {
        const { child, className, ...itemRest } = item;
        return items.length - 1 === index ? (
          <span key={index} className={classNames(styles.pane, className)}>
            {child}
          </span>
        ) : (
          <Pane
            key={index}
            className={classNames(styles.pane, className)}
            style={{ minWidth: 150, maxWidth: 600 }}
            {...itemRest}
          >
            {child}
          </Pane>
        );
      })}
    </span>
  );
};

Index.displayName = 'SplitPane';
export default Index;
